<template>
  <div class="uv-dropdown-filter">
    <div class="uv-dropdown-trigger" @click="toggleDropdown">
      <view style="padding-right: 10rpx;">{{ modelValue }}</view>
      <!-- <i class="uv-icon-arrow-down" :class="{ 'is-reverse': isOpen }"></i> -->
      <uv-icon :name="isOpen ? 'arrow-up' : 'arrow-down'" color="#fff"></uv-icon>
    </div>
  </div>
</template>

<script>
export default {
  name: 'UvDropdownFilter',
  props: {
    modelValue: {
      type: [String, Number],
      default: ''
    },
  },
  data() {
    return {
      isOpen: false
    }
  },
  computed: {
    selectedLabel() {
      const selected = this.options.find(item => item.value === this.modelValue)
      return selected ? selected.label : ''
    }
  },
  methods: {
    toggleDropdown() {
      this.isOpen = !this.isOpen
    },
    handleSelect(item) {
      this.$emit('update:modelValue', item.value)
      this.$emit('change', item)
      this.isOpen = false
    }
  },
  mounted() {
    // 点击外部关闭下拉框
    document.addEventListener('click', (e) => {
      if (!this.$el.contains(e.target)) {
        this.isOpen = false
      }
    })
  }
}
</script>

<style scoped>
.uv-dropdown-filter {
  position: relative;
  display: inline-block;
  font-size: 24rpx;
}

.uv-dropdown-trigger {
  display: flex;
  justify-content: space-between;
  /* width: 100%; */
  min-width: 100rpx;
  height: 46rpx;
  line-height: 46rpx;
  padding: 0 12px;
  border: 1px solid #fff;
  border-radius: 4px;
  cursor: pointer;
  user-select: none;
  color: #fff;
}
</style>